<template>
  <el-row
      :gutter="10"
      justify="start"
      style="background: linear-gradient(to right, #f8c06d, #f58147); padding: 15px 0; border-radius: 8px; margin-bottom: 20px"
  >
    <el-col :span="12">
      <h2 style="color: #fff; font-size: 24px; margin: 0; padding-left: 10px; text-align: left;color: #363644">评论分析</h2>
    </el-col>
  </el-row>
  <el-row :gutter="10" justify="start">
    <el-col :span="7">
      <label id="pjid" style="margin-right: 10px">用户编号:</label>
      <el-input style="width: 220px" height="70px" name="pjid" v-model="pingjia.pjid" placeholder="请输入用户id"></el-input>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" @click="doList">查询</el-button>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" @click="reset">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button type="success" @click="doAdd">+新增评论</el-button>
    </el-col>
    <el-col :span="2" style="margin-left: 370px">
      <el-button type="primary" @click="doPingJiaAnalysis" style="background-color: #f58147;border: none">评论数据分析</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="10" justify="start" >
    <el-table stripe
              :data="currentPageData"
              style="width: 100%"
              id = "caipin-table"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="pjid" label="评价编号"></el-table-column>
      <el-table-column prop="yhid" label="用户id"></el-table-column>
      <el-table-column prop="ddid" label="订单编号"></el-table-column>
      <el-table-column prop="sjid" label="商家编号"></el-table-column>
      <el-table-column prop="sjpf" label="商家评分"></el-table-column>
      <el-table-column prop="pjnr" label="评价内容"></el-table-column>
      <el-table-column prop="pjtp" label="评价图片"></el-table-column>
      <el-table-column prop="sjhf" label="商家回复"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="info" size="small" @click="doDetail(scope.row)">详情</el-button>
          <el-button type="danger" size="small" @click="doDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div class="pagination-container" :data="currentPageData" style="margin:20px auto">
      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 8, 10, 20, 50]"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-row>

<!--  新增评价 弹框-->
  <el-dialog v-model="addDialogVisible" title="新增评论" width="40%" top="2vh" destroy-on-close>
    <add-ping-jia ref = ""
      @flushPage="reset"
      @closeDialog="addDialogVisible = false">
    </add-ping-jia>
  </el-dialog>

<!--  评价详情 抽屉-->
  <div>
    <ping-jia-detail ref="pingJiaDetailRef" v-model="detailDialogVisible"></ping-jia-detail>
  </div>

<!--评价数据分析 弹框-->
  <el-dialog id = "pingjia-analysis" v-model="pingJiaAnalysisDialogVisible" title="用户评论分析" fullscreen>
    <ping-jia-analysis
      @close="pingJiaAnalysisDialogVisible = false">
    </ping-jia-analysis>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, nextTick, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import AddPingJia from "./AddPingJia.vue";
import PingJiaDetail from "./PingJiaDetail.vue";
import PingJiaAnalysis from "./PingJiaAnalysis.vue"

const pingjia = reactive({
  pjid: "",
});

const pingjiaList = ref([]);

//--------------------------分页-----------------------------
//分页变量
const total = ref(0);
const pageSize = ref(5);
const currentPage = ref(1);

const currentPageData = computed(() => {
  if (!Array.isArray(pingjiaList.value)) {
    return [];
  }
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return pingjiaList.value.slice(start, end);
});

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
};

const handleCurrentChange = (val) => {
  currentPage.value = val
};

//分页重置
const doPageReset = () => {
  total.value = 0;
  currentPage.value = 1;
  pageSize.value = 5;
}

// 刷新页面
const flushPage = () => {
  doPageReset();
  doList();
}

//--------------------------评价数据分析 弹框-----------------------------
const pingJiaAnalysisDialogVisible = ref(false);
function doPingJiaAnalysis() {
  pingJiaAnalysisDialogVisible.value = true;
}

//------------------------ 新增评价 弹框-----------------------------
const addDialogVisible = ref(false);
function doAdd() {
  addDialogVisible.value = true;
}


//--------------------------评价详情 弹框-----------------------------
const detailDialogVisible = ref(false)
const pingJiaDetailRef = ref();  //引用组件
const doDetail = (obj) => {
  detailDialogVisible.value = true;
  nextTick(()=>{
    pingJiaDetailRef.value.handleDetailData(obj);
  })
}

//------------------------ 执行查询操作-----------------------------
const doList = async () => {
  pingjiaList.value = [];
  const url = pingjia.pjid ? `/api/pingjia/${pingjia.pjid}` : '/api/pingjia';
  const {data} = await axios.get(url)
  console.log(data);
  if(data.code === 200){
    pingjiaList.value = pingjia.pjid
        ? [data.data]
        : data.data;
    total.value = pingjiaList.value.length; // 设置总条数
    ElMessage.success('查询成功');
  }else{
    ElMessage.error(data.message);
  }
}

//---------------------------执行删除操作----------------------------
async function doDelete(obj) {
  const {data} = await axios.delete(`/api/pingjia/${obj.pjid}`);
  if (data.code === 200) {
    ElMessage.success(data.message);
    await doList();
    flushPage();
  } else {
    ElMessage.error(data.message);
  }
}

//---------------------------执行重置操作----------------------------
function reset(){
  pingjia.pjid = '';
  doList()
}

onMounted(() =>{
  doList();
})


</script>

<style scoped>
el-row{
  margin-top: 20px;
}

el-table{
  margin-top: 20px;
}

#caipin-table{
  margin-top: 20px;
}

</style>